<template>
  <a-form :form="form">
    <!-- name -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="名字"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: '请填写你的名字' }] },
        ]"
        placeholder="请填写你的名字"
      />
    </a-form-item>
    <!-- phone -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="手机号"
    >
      <a-input
        type="tel"
        v-decorator="[
          'phone',
          { rules: [{ required: true, message: '请填写你的手机号' }] },
        ]"
        placeholder="请填写你的手机号"
      />
    </a-form-item>
    <!-- 邮箱 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="邮箱"
    >
      <a-input
        type="email"
        v-decorator="[
          'email',
          { rules: [{ required: true, message: '请填写你的邮箱' }] },
        ]"
        placeholder="请填写你的邮箱"
      />
    </a-form-item>
    <!-- 密码 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="密码"
    >
      <a-input
        type="password"
        v-decorator="[
          'password',
          { rules: [{ required: true, message: '请填写你的密码' }] },
        ]"
        placeholder="请填写你的密码"
      />
    </a-form-item>
    <!-- 确认密码 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="确认密码"
    >
      <a-input
        type="password"
        v-decorator="[
          'enterpassword',
          { rules: [{ required: true, message: '请确认你的密码' }] },
        ]"
        placeholder="请确认你的密码"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="Nickname"
    >
      <a-input
        v-decorator="[
          'nickname',
          {
            rules: [
              { required: checkNick, message: 'Please input your nickname' },
            ],
          },
        ]"
        placeholder="Please input your nickname"
      />
    </a-form-item>
    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-checkbox :checked="checkNick" @change="handleChange">
        Nickname is required
      </a-checkbox>
    </a-form-item>
    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-button type="primary" @click="check"> 注册 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { jm } from "./../../utils/safe";

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  data() {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
    };
  },
  methods: {
    check() {
      console.log("getFieldsValue");
      this.form.validateFields((err) => {
        if (!err) {
          console.info("success");
          // 先加密
          let params = this.form.getFieldsValue();
          delete params.enterpassword;
          params.password = jm(params.password);
          // 请求注册接口
          console.log("params", params);
        }
      });
    },
    handleChange(e) {
      this.checkNick = e.target.checked;
      this.$nextTick(() => {
        this.form.validateFields(["nickname"], { force: true });
      });
    },
  },
};
</script>